4 - Two-way Data Binding

In this step, you will add a feature to let your users control the order of the items in the phone list. The dynamic ordering is implemented by creating a new model property, wiring it together with the repeater, and letting the data binding magic do the rest of the work.

You should see that in addition to the search box, the app displays a drop down menu that allows users to control the order in which the phones are listed.

The most important differences between Steps 3 and 4 are listed below. You can see the full diff on GitHub:

Template

app/index.html :

  Search: <input ng-model="query">
  Sort by:
  <select ng-model="orderProp">
    <option value="name">Alphabetical</option>
    <option value="age">Newest</option>
  </select>


  <ul class="phones">
    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
      {{phone.name}}
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

We made the following changes to the index.html template: